<template>
  <!-- 登录页 -->
  <view class="login">
    <view class="title">
      森林防火预警系统
    </view>
    <view class="toregister" @click="toregister">
      <view class="">点击注册</view>
      <image src="../../static/image/right.png" mode=""></image>
    </view>
    <image src="../../static/image/bg.png" mode="widthFix" class="bg-img"></image>
    <view class="login-main">
      <view class="form" v-if="current == 1">
        <view class="item" :class="'login_user ' + nameFocus">
          <input type="text" class="input-ui u-border" placeholder="请输入手机号" v-model.number="phone" @blur="isTelCode(phone)"/>
          <view class="showPwd" @click="cleartext">
            <image class="text-icon-1" src="../../static/image/2.png"></image>
          </view>
        </view>
        <view class="item" :class="'login_user ' + nameFocus">
          <input type="text" class="input-code" placeholder="请输入验证码" v-model="code" />
          <view class="getcode">
            <view @click="get" v-show="ok == 0">获取验证码</view>
            <view v-show="ok == 1">{{countTime}}</view>
          </view>
        </view>
        <view class="login-btn" @click="login()">登&nbsp;&nbsp;&nbsp;录</view>
      </view>
      <view class="form" v-if="current == 2" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
        <image src="../../static/image/code-balck.png" mode="" show-menu-by-longpress="true" @longpress="showActionSheet" class="code-img"></image>
        <view class="tip">
          长按二维码扫一扫登录
        </view>
      </view>
      <view class="form" v-if="current == 3">
        <view class="item" :class="'login_user ' + nameFocus">
          <input type="text" class="input-ui u-border" placeholder="请输入手机号" v-model="phone" />
          <view class="showPwd" @click="cleartext">
            <image class="text-icon-1" src="../../static/image/2.png"></image>
          </view>
        </view>
        <view class="item" :class="'login_pwd ' + psdFocus">
          <input type="text" class="input-ui u-border" placeholder="请输入密码" :type="type == 'password' ? 'text' : type"
            :password="!showPassword" v-model="password" />
          <view class="showPwd">
            <image class="text-icon-2"
              :src="showPassword ? '../../static/image/4.png' : '../../static/image/3.png'"
              @tap="showPassword = !showPassword"></image>
          </view>
        </view>
        <view class="login-btn" @click="login">登&nbsp;&nbsp;&nbsp;录</view>
      </view>
      <view class="form" v-if="current == 4">
        <view style="{margin: 120rpx auto;}" class="login-btn" @click="login3">一键登录</view>
      </view>
      <!-- 更多登录方式 -->
      <view class="login-more-con">
        <view class="login-more-title">
          <view class="line"></view>
          <view class="">更多方式</view>
          <view class="line"></view>
        </view>
        <view class="login-more">
          <view class="login-type" v-for="(item,index) in logintype" :key="item.id" :style="{'backgroundColor': item.bgcol}" @click="changetype(item.id)">
            <image :src="item.imgurl" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 提示信息框 -->
    <view class="msg" :style="{'top':top+'rpx'}">
      <view class="text">
        {{msg}}
      </view>
      <view class="yes" @click="changetop">
        确定
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nameFocus: '',
        password: '',
        phone: '',
        // 手机验证码
        code:'', 
        psd: "",
        psdFocus: '',
        current:1,
        showPassword: false,
        ok: 0,
        countTime: 60,
        top: -500,
        msg: '账号或者密码错误',
        // previewimageurl:'/static/image/code-black.png',
        logintype:[{
          id:1,
          imgurl:'/static/image/phone.png',
          text:'手机号验证码登录',
          bgcol:'#3c74ed'
        },{
          id:2,
          imgurl:'/static/image/code.png',
          text:'二维码登录',
          bgcol:'#68e2ed'
        },{
          id:3,
          imgurl:'/static/image/password.png',
          text:'手机哈密码登录',
          bgcol:'#7b42ed'
        },{
          id:4,
          imgurl:'/static/image/wechat.png',
          text:'微信一键登录',
          bgcol:'#3c74ed'
        }]
      }
    },
    methods: {
      cleartext(){
        this.phone=''
      },
      cleartext2() {
        this.code = ''
      },
      get() {
        this.ok = 1
        var Timer = setInterval(() => {
          this.countTime--
          if (this.countTime <= 0) {
            clearInterval(Timer)
            this.ok = 0
            this.countTime = 60
          }
        }, 1000)
      },
      // 验证手机号码
      isTelCode(str) {
        //正则表达式定义手机号正确格式
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        if (!reg.test(str)) {
          this.msg = '请输入正确的手机号'
          this.top = 50
        }
      },
      // 关闭提示框
      changetop() {
        this.top = -500
      },
      // 登录
      login() {
        if(this.current == 1) {
          this.isTelCode(this.phone)
          if(this.phone == '' && this.code == '') {
            // 开启弹窗
            this.top = 50
            this.msg = '请按要求填入信息再登录'
          }
          else if(this.phone == '') {
            // 开启弹窗
            this.top = 50
            this.msg = '请输入手机号'
          }
          else if(this.code == '') {
            this.top = 50
            this.msg = '请输入验证码'
          } 
        }
        else if(this.current == 3 ) {
          this.isTelCode(this.phone)
          if(this.phone == '' && this.password == '') {
            // 开启弹窗
            this.top = 50
            this.msg = '请按要求填入信息再登录'
          }
          else if(this.phone == '') {
            // 开启弹窗
            this.top = 50
            this.msg = '请输入手机号'
          }
          else if(this.password == '') {
            this.top = 50
            this.msg = '请输入密码'
          } 
        }
      },
      login3() {
        this.top = 50
        this.msg = '开发中,敬请期待' 
      },
      changetype(index) {
        this.current = index
        this.phone = ''
        this.code = ''
        this.password = ''
      },
      showActionSheet() {
        uni.showActionSheet({
          itemList: ['扫一扫'],
          success: res => {
            console.log('选中的索引：', res.tapIndex);
            // 根据索引执行对应的操作
            switch (res.tapIndex) {
              case 0:
                // 执行扫一扫操作
                this.scancode();
                break;
              default:
                break;
            }
          },
          fail: err => {
            console.log('操作菜单出错：', err);
          }
        });
      },
      // 扫一扫
      scancode() {
        console.log("用户扫一扫了");
      },
      toregister() {
        uni.navigateTo({
          url:'/pages/register/register'
        })
      }
    }
  }
</script>

<style>
  .title {
    position: absolute;
    left: 50rpx;
    top: 230rpx;
    height: 50rpx;
    color: #3ca2e9;
    font-size: 42rpx;
    padding-bottom: 20rpx;
    font-weight: 600;
    border-bottom: 4rpx solid #fff;
  }
.login {
  background-color: #fff;
  position: relative;
  height: calc(100vh-44px);
}
.bg-img {
  width: 100%;
  height: 520rpx;
}
.login-main {
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;
  top: 336rpx;
  position: absolute;
  width: 100%;
  height: 700rpx;
  color: #fff;
  z-index: 99;
}
.login-btn {
  margin: 80rpx auto;
  width: 300rpx;
  height: 80rpx;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  font-weight: 600;
  /* letter-spacing: 20rpx; */
  box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.5);
  background: linear-gradient(to right,#3c74ed,#7e8edd);
}
.form {
    width: 600rpx;
    margin: 80rpx auto;
  }

  .item {
    width: 520rpx;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 42rpx;
  }

  .input-ui {
    width: 520rpx;
    color: #3c74ed;
    border-radius: 48rpx;
    font-size: 32rpx;
    margin: 0 auto;
    font-family: "Alibaba_bold";
    height: 80rpx;
    padding-left: 40rpx;
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
  }

  input::input-placeholder {
    color: rgba(153, 153, 153, 1);
  }

  .showPwd {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }


  .text-icon-1 {
    width: 35rpx;
    height: 35rpx;
  }

  .text-icon-2 {
    width: 42rpx;
    height: 35rpx;
  }
  .input-code {
    width: 300rpx;
    color: #3c74ed;
    border-radius: 48rpx;
    font-size: 32rpx;
    font-family: "Alibaba_bold";
    height: 80rpx;
    padding-left: 40rpx;
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
  }
  .getcode {
    width: 150rpx;
    height: 70rpx;
    font-size: 26rpx;
    /* background: #4f9ae8; */
    box-shadow: 0rpx 8rpx 13rpx 0rpx rgba(106, 147, 199, 0.35);
    border-radius: 10rpx;
    color: #3c74ed;
    font-weight: 600;
    text-align: center;
    line-height: 70rpx;
  }
  .msg {
    position: fixed;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
    width: 550rpx;
    border-radius: 20rpx;
    padding: 20rpx;
    z-index: 99;
    left: 50%;
    transform: translateX(-295rpx);
    background-color: #ffffff;
  }
  
  .yes {
    padding: 10rpx;
    width: 100rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    color: #ffffff;
    background: linear-gradient(to right,#3c74ed,#7e8edd);
  }
  .login-type {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-type image {
    width: 100%;
    height: 100%;
  }
  .login-more {
    width: 450rpx;
    margin: 40rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .login-more-con {
    margin-top: 100rpx;
  }
  .login-more-title {
    width: 600rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    color: #3c74ed;
    font-size: 26rpx;
    justify-content: space-between;
  }
  .line {
    width: 200rpx;
    height: 2rpx;
    background-color: #ccc;
  }
  .code-img {
    width: 400rpx;
    height: 400rpx;
  }
  .tip {
    font-size: 24rpx;
    color: #3c74ed;
    margin-top: 20rpx;
  }
  .text {
    color: #3c74ed;
  }
  .toregister {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    display: flex;
    align-items: center;
    width: 150rpx;
    height: 40rpx;
    color: #fff;
    font-size: 26rpx;
    justify-content: space-between;
  }
  .toregister image {
    width: 35rpx;
    height: 35rpx;
  }
</style>
